<template>
  <div class="form-setting-panel">
    <mform-setting-title title="底部导航"> </mform-setting-title>

    <div class="portal-config-tabbar-drag">
      <div class="portal-config-drag-header">
        <span>导航名称</span>
        <div>
          <el-checkbox
            :indeterminate="false"
            v-model="isCheckedAll"
            @change="handleCheckAllChange"
          ></el-checkbox>
          <span class="portal-config-drag-text">全选</span>
        </div>
      </div>

      <!-- 拖动区域 -->
      <draggable
        v-model="list"
        v-bind="{
          animation: 500,
        }"
        @end="handleEnd"
      >
        <transition-group>
          <div
            class="portal-config-drag-item"
            v-for="item in list.filter(item => item.value !== 'personal')"
            :key="item.title"
          >
            <div>
              <i class="iconfont icon-tuozhuaipaixu"></i>
              <span>{{ item.title }}</span>
            </div>
            <el-checkbox
              v-model="item.isVisible"
              :disabled="item.disabled"
              @change="handleCheckedTabbarChange"
            ></el-checkbox>
          </div>
        </transition-group>
      </draggable>

      <div class="portal-config-drag-item">
        <div>
          <i class="iconfont icon-tuozhuaipaixu"></i>
          <span>{{ personTab.title }}</span>
        </div>
        <el-checkbox
          v-model="personTab.isVisible"
          :disabled="personTab.disabled"
        ></el-checkbox>
      </div>
    </div>
    <div class="portal-config-tabbar-hint">
      取消勾选后，移动端访问门户时不会显示对应页面
    </div>
  </div>
</template>

<script>
/* mixin */
import SettingMixin from '@src/mform/mixin/setting';
/* props */
import { settingProps } from '@src/mform/components/props';
import draggable from 'vuedraggable';
/* mixin */
import { VersionControlLinkCMixin } from '@src/mixins/versionControlMixin';

export default {
  name: 'mform-tabbar-setting',
  mixins: [
    SettingMixin, 
    VersionControlLinkCMixin
  ],
  props: settingProps,
  components: {
    draggable,
  },
  data() {
    return {
      list: [],
      isCheckedAll: false,
    };
  },
  computed: {
    tabBarList() {
      
      let arr = this.fieldSetting.list || []
      
      arr = arr.filter(item => {
        
        if (item.value == 'market') {
          return this._isShowLinkCShop
        }
        
        return true
      })
      
      return arr
    },
    notHavePersonTabTabBarList() {
      return this.list.filter(item => item.value !== 'personal');
    },
    personTab() {
      return this.list.find(item => item.value === 'personal') || {};
    },
  },
  methods: {
    handleCheckAllChange() {
      if (this.isCheckedAll) {
        this.list
          .filter(item => item.value !== 'personal')
          .forEach(item => {
            item.isVisible = true;
          });
      } else {
        this.list
          .filter(item => item.value !== 'personal')
          .forEach(item => {
            item.isVisible = false;
          });
      }

      this.updateList(this.list);
    },
    handleCheckedTabbarChange() {
      this.updateList(this.list);
      this.isCheckedAll = this.notHavePersonTabTabBarList.every(
        item => item.isVisible
      );
    },
    handleEnd() {
      this.updateList(this.list);
    },
    updateList(value) {
      this.update(value, 'list');
    },
  },
  mounted() {
    this.list = Object.assign([], this.tabBarList);
    this.isCheckedAll = this.notHavePersonTabTabBarList.every(
      item => item.isVisible
    );
  },
};
</script>

<style lang="scss" scoped>
.portal-config-tabbar-hint {
  font-size: 12px;
  color: #8c8c8c;
  margin: 8px 16px 24px;
}

.portal-config-tabbar-drag {
  // width: 100%;
  height: auto;
  border: 1px solid #e8e8e8;
  padding: 12px 12px 9px;
  margin: 16px;
  // box-sizing: border-box;

  .portal-config-drag-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;

    span {
      font-size: 14px;
      color: #262626;
    }

    .portal-config-drag-text {
      margin: 0 8px 0 4px;
    }
  }

  .portal-config-drag-item {
    width: 100%;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;

    i {
      margin: 0 4px 0 8px;
      color: #8c8c8c;
      font-size: 14px;
    }

    span {
      font-size: 14px;
      color: #595959;
    }

    .el-checkbox {
      margin-right: 44px;
    }
  }
}
</style>
